<template>
    <div class="CompanyDetail">
        <div class="message">
        <div>
            <span>00001.sz</span> <span>平安银行</span>
        </div>
        <div>
            注册资本:<span>1940591.8198</span>
            所属行业:<span>银行</span>
            市场类型:<span>主板</span>
            员工人数：<span>406551</span>
        </div>
        <div>
            所在城市：<span>广东深圳市</span>
            公司主页：<span>bank.pingan.com</span>
            电子邮件：<span>PAB_db@pingan.com.cn</span>
        </div>
    </div>

        <div class="checkBox">
            <div>
                <el-button type="primary" size="large" style="margin-left: 16px; font-size: 20px;" @click="drawer = true">
                    办公地点
                </el-button>
                <el-drawer v-model="drawer" title="I'm outer Drawer" size="50%">
                    <div>
                        <el-button @click="innerDrawer = true">Click me!</el-button>
                        <el-drawer v-model="innerDrawer" title="I'm inner Drawer" :append-to-body="true"
                            :before-close="handleClose">
                            <p>_(:зゝ∠)_</p>
                        </el-drawer>
                    </div>
                </el-drawer>
            </div>
            <div>
                <el-button size="large" type="primary" style="margin-left: 16px; font-size: 20px;" @click="drawer = true">
                    公司介绍
                </el-button>
                <el-drawer v-model="drawer" title="I'm outer Drawer" size="50%">
                    <div>
                        <el-button @click="innerDrawer = true">Click me!</el-button>
                        <el-drawer v-model="innerDrawer" title="I'm inner Drawer" :append-to-body="true"
                            :before-close="handleClose">
                            <p>_(:зゝ∠)_</p>
                        </el-drawer>
                    </div>
                </el-drawer>
            </div>
            <div>
                <el-button size="large" type="primary" style="margin-left: 16px; font-size: 20px;" @click="drawer = true">
                    经营范围
                </el-button>
                <el-drawer v-model="drawer" title="I'm outer Drawer" size="50%">
                    <div>
                        <el-button @click="innerDrawer = true">Click me!</el-button>
                        <el-drawer v-model="innerDrawer" title="I'm inner Drawer" :append-to-body="true"
                            :before-close="handleClose">
                            <p>_(:зゝ∠)_</p>
                        </el-drawer>
                    </div>
                </el-drawer>
            </div>
            <div>
                <el-button size="large" type="primary" style="margin-left: 16px; font-size: 20px;" @click="drawer = true">
                    主要业务及产品
                </el-button>
                <el-drawer v-model="drawer" title="I'm outer Drawer" size="50%">
                    <div>
                        <el-button @click="innerDrawer = true">Click me!</el-button>
                        <el-drawer v-model="innerDrawer" title="I'm inner Drawer" :append-to-body="true"
                            :before-close="handleClose">
                            <p>_(:зゝ∠)_</p>
                        </el-drawer>
                    </div>
                </el-drawer>
            </div>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
const drawer = ref(false)
const innerDrawer = ref(false)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('You still have unsaved data, proceed?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

</script>

<style lang="scss" scoped>
.CompanyDetail {
    width: 1018px;
    height: 100%;
    margin: 0 auto;
    .message{
        margin-left: 18px;
        box-sizing: border-box;
    div {
        height: 50px;
        line-height: 50px;
        span {
            margin-right: 115px;
        }
    }
    }
    .checkBox{
        margin-top: 70px;
        display: flex;
        justify-content: space-between;
    }
}
</style>

sty